<template>
  <view v-if="shenheStatus == 0" :class="useNav ? 'useFoot' : ''">
    <view :class="['diy-page', hasFoods]" v-if="page">
      <view class="diy-page-bg" :style="[pageCss]"></view>
      <diyItem
        v-for="(item, index) in templates"
        :key="index"
        :params="item"
        :location="location"
        :page="page"
      ></diyItem>
      <controls :controlList="controlList"></controls>
      <!-- <footNav v-if="showFoot" :controlList="controlList"></footNav> -->
    </view>
    <transitionPage></transitionPage>
  </view>
  <Shenhe v-else-if="shenheStatus == 1" :isShowTitle="true"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import diyItem from "@/components/diyNew/index.vue";
import controls from "@/components/diyNew/controls/index.vue";
import footNav from "@/components/diyNew/footNav/index.vue";

export default {
  components: {
    diyItem,
    controls,
    footNav,
    Shenhe
  },
  data() {
    return {
      templates: [],
      page: null,
      controlList: [],
      location: {
        longitude: "",
        latitude: ""
      },
      useNav: false,
      hasFoods: ""
    };
  },
  computed: {
    pageCss() {
      if (this.page) {
        let pageCss = JSON.parse(JSON.stringify(this.page.pageCss));
        if (pageCss?.padding) delete pageCss.padding;
        if (pageCss?.borderRadius) delete pageCss.borderRadius;
        return pageCss;
      } else {
        return "";
      }
    },
    showFoot() {
      let routes = getCurrentPages() || [];
      if (routes && routes.length <= 1) return true;
      return false;
    }
  },
  onLoad(t) {
    this.getIndexPageDiy(t);
  },
  methods: {
    getIndexPageDiy({ id, store_id }) {
      uni.showLoading({
        title: this.$t("home.loading")
      });
      this.$allrequest.diyNew.getDiyIndexPage({ id, store_id }).then((res) => {
        uni.hideLoading();
        if (!res.code) {
          let data = res.data.template;
          this.page = JSON.parse(data.template);
          this.templates = this.page.templates;
          res.data.controls = JSON.parse(res.data.controls);
          this.controlList = res.data.controls;

          let flag = this.$utils.useFoot(this.controlList, this.page.id);
          this.useNav = flag;

          let foods = this.templates.filter(
            (el) => el.comName === "orderingFood"
          );
          if (foods && foods.length) {
            this.hasFoods = "foods";
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.diy-page {
  width: 100%;
  min-height: 100vh;
  overflow-y: auto;
  &.foods {
    padding-bottom: calc(100rpx);
    padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  }

  .diy-page-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.useFoot {
  padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}
</style>
